<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            list-style: none;
        }
        
        .message {
            margin: 50px;
            width: 300px;
            background: orange;
        }
        
        .top {
            overflow: hidden;
        }
        
        #name {
            margin-left: 5px;
        }
        
        textarea {
            margin: 15px;
            margin-left: 40px;
        }
        
        .check {
            float: right;
            margin-right: 20px;
        }
        
        .checkbox {
            margin-right: 5px;
        }
        
        .publish {
            width: 50px;
        }
        
        .bottom {
            margin-top: 10px;
            border-top: 5px solid #ccc;
            padding-top: 3px;
        }
        
        h4 {
            margin-bottom: 5px;
        }
        
        li {
            margin-bottom: 15px;
        }
        
        .time {
            float: right;
            margin-right: 3px;
        }
        
        .info {
            padding-left: 40px;
            padding-top: 5px;
        }
    </style>
</head>

<body>
    <div class="message">
        <div class="top">
            <label for="name">昵称:</label><input type="text" id="name"><br>
            <textarea name="" id="content" cols="30" rows="10"></textarea>
            <div class="check">
                <input type="checkbox" class="checkbox">匿名<br>
                <input type="button" value="发表" class="publish">
            </div>
        </div>
        <div class="bottom">
            <h4>留言栏</h4>
            <ul class="lis"></ul>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $('.publish').click(function() {
            // 昵称或留言信息为空时
            if ($('#name').val() == '' || $('#content').val() == '') {
                alert('昵称或内容不能为空')
            } else {
                // 昵称和留言信息不为空时
                // 获取昵称信息
                if ($('.checkbox').prop('checked')) {
                    var name = '匿名用户'
                } else {
                    name = $('#name').val();
                }
                //获取留言信息
                let message = $('#content').val()

                //获取当前时间
                let data = new Date();
                let h = data.getHours();
                if (h < 9) {
                    h = '0' + h
                }
                let m = data.getMinutes();
                if (m < 9) {
                    m = '0' + m
                }
                let s = data.getSeconds();
                if (s < 9) {
                    s = '0' + s
                }
                let time = `${h}:${m}:${s}`

                // 创建li标签,放在ul标签里
                let li = $(`<li>
                             <div>昵称:${name} <span class="time">${time}<span></div> 
                             <div class='info'> ${message}</div>
                            </li>`)
                $('.lis').prepend(li);
                // 恢复默认样式
                $('#name').val('');
                $('#content').val('');
                $('.checkbox').prop('checked', false)
            }


        })
    </script>
</body>

</html>